article#grid-about .gambar-p .title {
  background-image:url(../image/about-title.png);
  background-position:20px 0;
  background-repeat:no-repeat;
  height:310px;
  width:1000px;
  position:absolute;
  margin:-30px 0 0 -400px;
  z-index:1;
}
article#grid-about .bg-1x88z2 {
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  right:0;
  height:470px;
  background-color:rgba(3,3,3,.2);
  background-image:url(../image/index-about.png);
  box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
  -moz-box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
  -webkit-box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
}
article#grid-about .photo {
  position:absolute;
  height:470px;
  left:0;
  top:0;
  right:0;
  z-index:1;
  background-color:#191919;
  background-image:url(../image/me.jpg);
  background-repeat:no-repeat;
  background-position:top center;
  box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
  -moz-box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
  -webkit-box-shadow:inset 4px -8px 12px rgba(0,0,0,.9);
}
article#grid-about .dot-icon {
  background:none!Important;
  margin:0 0 -35px 0!Important;
}
article#grid-about {
  width:1000px;
  margin:0 auto;
  padding-bottom:60px;
}
article#grid-about .tulisan {
  margin-bottom:8px;
  padding:20px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
article#grid-about .grid-m1,article#grid-about .grid-m2,article#grid-about .grid-m3 {
  float:left;
  width:22px;
  height:1px;
}
article#grid-about .row {
  background:url(../image/border-about.png)no-repeat bottom center;
  height:20px;
  margin:0 0 20px;
}
article#grid-about span.judul {
  display:block;
  padding:6px 11px;
  font-size:32px;
  letter-spacing:1px;
  line-height:.9em;
  text-transform:uppercase;
  text-shadow:0 0 5px #000,7px 7px 0 #111;
  color:#555;
}
article#grid-about .grid-c1,article#grid-about .grid-c2 {
  float:left;
  width:468px;
}
article#grid-about .coll-1,article#grid-about .coll-2,article#grid-about .coll-3 {
  margin:10px 0;
  float:left;
  width:28%;
  font-size:12px;
}
article#grid-about h2 {
  font-size:14px;
  text-transform:uppercase;
  line-height:17px;
  color:#999;
}
article#grid-about h1 {
  font-size:14px;
  text-transform:uppercase;
  font-family:open sans bold,arial,sans serif;
  color:#a5a5a5;
  padding:8px 0 15px 0;
  margin:40px 0 4px 0;
  border-bottom:2px solid rgba(0,0,0,0.3);
  box-shadow:0 1px 0 0 rgba(255,255,255,0.1);
  -webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.1);
}
.why {
  position:absolute;
  margin:170px 0 0 -190px;
}
article#grid-about .gambar-p div.title,article#grid-about img.why,article#grid-about .judul1,article#grid-about .text-p p {display:none;}
article#grid-about #skill {
  list-style:none;
  font:12px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
  margin:8px auto 0;
  position:relative;
  line-height:2em;
  padding:30px 0;
}
article#grid-about #skill li {
  margin-bottom:50px;
  height:6px;
  background-color:rgba(0,0,0,0.09);
  box-shadow:0 1px 0 #000 inset,0 1px 0 #222;
  -webkit-box-shadow:0 1px 0 #000 inset,0 1px 0 #222;
}
article#grid-about #skill li h3 {
  position:relative;
  top:-25px;
  color:#555;
  font:10px arial,sans serif!Important;
}
article#grid-about #skill .bar {
  height:5px;
  margin:1px 2px;
  position:absolute;
  border-radius:10px;
  box-shadow:0 1px 3px #000,inset 0 2px 10px rgba(255,255,255,0.09);
  -webkit-box-shadow:0 1px 3px #000,inset 0 2px 10px rgba(255,255,255,0.09);
  background-color:rgba(55,55,55,0.15);
}
article#grid-about #skill .graphic-design {
  width:60%;
  -moz-animation:graphic-design 2s ease-out;
  -webkit-animation:graphic-design 2s ease-out;
  background-color:#484b3b;
}
#skill .html-css {
  width:47%;
  -moz-animation:html-css 2s ease-out;
  -webkit-animation:html-css 2s ease-out;
  background-color:#3b4b3d!Important;
}
article#grid-about #skill .jquery {
  width:35%;
  -moz-animation:jquery 2s ease-out;
  -webkit-animation:jquery 2s ease-out;
  background-color:#3b464b!Important;
}
article#grid-about #skill .seo {
  width:5%;
  -moz-animation:wordpress 2s ease-out;
  -webkit-animation:wordpress 2s ease-out;
  background-color:#473b4b!Important;
}
@-moz-keyframes graphic-design {
  0% {width:0;}
  100% {width:100%;}
}
@-moz-keyframes html-css {
  0% {width:0;}
  100% {width:90%;}
}
@-moz-keyframes jquery {
  0% {width:0;}
  100% {width:65%;}
}
@-moz-keyframes wordpress {
  0% {width:0;}
  100% {width:80%;}
}
@-webkit-keyframes graphic-design {
  0% {width:0;}
  100% {width:100%;}
}
@-webkit-keyframes html-css {
  0% {width:0;}
  100% {width:90%;}
}
@-webkit-keyframes jquery {
  0% {width:0;}
  100% {width:65%;}
}
@-webkit-keyframes wordpress {
  0% {width:0;}
  100% {width:80%;}
}